【第一回 Meet Up】 React Native Tech Blog
https://gyazo.com/5d817926b452abfe7eba5f9144f194b4
https://www.youtube.com/watch?v=SMZP1fQQ5Cg
ログインのすべて
ログイン
実装が大変、いきなり挫折しがち
実装方法
バックエンド言語＋フレームワーク
メールアドレスログイン
createUserWithEmailAndPassword(email, password)
匿名ログイン
signInAnonymously
電話番号ログイン
captcha.htmlの用意
DEPLOY
実装
Facebookログイン
expo-facebookが用意している
Googleログイン
expo-google-app-authを用意している
React Nativeコミュニティに入ったきっかけ
NodeJSコラボレーターが退職した
自分もメインコントリビューターになってみたい
問題
good first issue
肥大化している
コアパッケージとして機能を切り出していく
Issueで切ったは良いけど着手されていないコンポーネントが合った
そこにコントリビュートしてみようと思った
Add LeanCore Extracted Badge to README
バージョンでのdiffを取れるような機能
メンテをする
リリースする権限ももらえた
React Native自体はFacebook
React Nativeコミュニティは別の企業などでも運営
特典
React Nativeの最新機能について追える
リリースプロセス
ペアプロでやる
rc2リリースのときにpdxprojがxcodeのディレクトリでコンフリクトしていた
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
仕様の紹介
カメラロールから複数選択・アップロードする
BottomNavigationの出品アイコンでスクリーン表示
カメラロール内の以下の項目を取得
最近の項目
お気に入り
存在するアルバムすべて
フォルダ選択画面ですべての写真
降順表示
複数洗濯、アップロード
試してみたこと・問題点
アルバム選択画面を削って1万件にした
機能縮小で既存ユーザーが混乱
カメラロールに1万件以上保存しているユーザー
問い合わせが増えて
アップロード率低下
10万件にした
ソートすると画面が真っ白
CPUリソースが増える
端末が熱くなる
写真の複数選択ができなかった
実装したこと
アルバム選択機能を実装
アルバムだけ抽出するAPIはない
10万件の写真をループしてアルバム名を取得してキャッシュに乗せる
CameraRollでがんばる
写真をぶん回す
ソートはできないがgroup_nameの指定ができる
写真の表示速度が高速化されてるっぽく見える
「最近の項目」選択するとまだ処理は重い
Expoで開発したい
メリット
JSで完結
ホットリロード
アプデの際のapp storeを通さずに済む
リソースの少ないチームの味方
動画比較機能
expo-avのライブラリが一部破損
動画キャプチャへの書き込み
react-native-cliからExpoへ移行できない
どう死守したか
WebViewをフル活用した
URLパラメタで動画ソースを指定
WebViewとのやりとり
WebViewを埋め込んだページ
画面表示
動画のロード開始・終了
動画の画面サイズ取得
WebViewの大きさ変更
ドラッグ開始して終了するまで信号でスクロールしないようにする
メリット
Web技術を利用できる
Webとコードの共通化
デメリット
コードの煩雑化
ネイティブ機能が使えない
Android動画
開発しづらい
キャッシュなど
ページ表示速度が遅くなる
Gatsbyなのでまだマシだが
SSRするものだと遅くなりそう
効きそうな所
静的ページ
動画系
Canvas
3D
高度なアニメーション
グラフ
React Native向けのSDKプラグインを公開した
Native Module
React Nativeは多くのネイティブの機能が利用できる
例：アラート Alert.alert'(...)
標準でないネイティブの機能を利用したい
同じ用にJSから利用できるようにしたい
react-native-community/react-native-webview
react-native-community/react-native-maps
オススメはcreate-react-native-module
bobはLinterやFormatterの初期設定がある
Auto Linking
0.60より導入された
react-native configで得られるProjectのメタ情報を利用してLinkする
デフォルトのconfigに一致
*.podspecがProject直下にある
変更する場合はreact-native.config.js
Tips
importでパスが確認できずエラー
example/ios/example.xcworkspaceを開く
pop installしてから
Sync modules
ios/やandroid/ を変更して毎回yarn installする
対象のコードのみ差し替える
node_modulesを直接更新するスクリプト
パネルディスカッション
どうやって学んだ？勉強してる？
ソースコードをちゃんと見る
作りたいものを作りながらやっていく
本人の出来もあるが、別言語経験があれば2〜3ヶ月くらいで習得できそう
チュートリアルを見る
モバイルの知識をつける
トラブルシューティングにつよくなる
良いと思う
0.60より改善された
ここからやるには良いのでは？
速度改善
ネイティブを知らない、少ないチームであれば良さそう
できないことはまずない
脱却しなくてもよさそう
非エンジニア側の理解が必要
一旦リリースしてみようの精神
「本当に」かゆいところに手が届かない
canvas、動画まわり
SNSのシェアボタン
カレンダー、DatePickerはつらい
react-native-gesture-hundlerなどでスワイプ周りは改善した
エンジニアが大きくなったら離れても良い？
10人〜とか？
JSerばっかりならいいんじゃないのかな（CureApp）
モバイルのコアな機能を使う場合は無理しない・テストする
写真
動画
パフォーマンス的にシビアなところ
センサー
ユーザー行動計測について
React Nativeエンジニア採用できるか
なかなか見つからない
なにかしらの言語を知っていればOK
Webの方も触っていてほしい
設計はガッツリ触っている人がほしい
外部顧問？
まだ成熟していないのでforkを切って自分たちでなんとか育てる気概が必要
出たばっかなので比較しづらい
メリット
JSなのでそのアーキテクチャを流用できる
JSやってなかったらいいのではないか